{% extends 'shop/base.html' %}

{% block title%}
    商品列表页
{% endblock %}

{% block content %}
    {% verbatim myblock %}
    <div class="row" id="goods_table">
        <div class="input-group">
            <input type="text" id="keywords" class="form-control bg-light border-0 small" placeholder="商品查询">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button" v-on:click="get_keywords_data()">
                    <i class="fas fa-search fa-sm"></i>
                </button>
            </div>
        </div>
        <table class="table dataTable">
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>出厂日期</th>
                <th>保质期</th>
                <th>操作</th>
            </tr>
            <tr v-for="g in goods_list">
                <td><a v-bind:href="'/Shop/goods/'+g.id">{{ g.name }}</a></td>
                <td>{{ g.price }}</td>
                <td>{{ g.number }}</td>
                <td>{{ g.production }}</td>
                <td>{{ g.safe_date }}</td>
                <td>
                    <a v-bind:href="'/Shop/set_goods/'+g.id+'/?set_type=up'+'/'" class="btn btn-primary" style="color: white;">上架</a>
                </td>
            </tr>
        </table>
        <div class="dataTables_paginate paging_simple_numbers">
            <ul class="pagination">
                <li class="paginate_button page-item previous" v-for="page in page_range">
                    <a class="page-link" v-on:click="get_page_data(page)" style="background: #ea4335;color: #fadbd8;">
                        {{ page }}
                    </a>
                </li>
            </ul>
        </div>
    </div>
    {% endverbatim myblock %}
{% endblock %}

{% block script %}
    <script src="/static/shop/js/jquery-1.11.0.js"></script>
    <script src="/static/shop/js/vue.min.js"></script>
    <script src="/static/shop/js/vue-resource.js"></script>
    <script>
        Vue.use(VueResource);
        var vue = new Vue(
            {
                el:"#goods_table",
                data: {
                    "message": "hello world",
                    "goods_list": [],
                    'page_range':[],
                    'referer':''
                },
                created: function () {
                    this.$http.get("/Shop/Goods/").then(
                        function (data) {
                            this.goods_list = data["data"]["data"];
                            this.page_range = data['data']['page_range'];
                        },
                        function (error) {
                            console.log(error)
                        }
                    )
                },
                methods: {
                    get_page_data:function (page) {
                        var url='/Shop/Goods/?page='+page+this.referer;
                        this.$http.get(url).then(
                            function (data) {
                                this.goods_list = data['data']['data'];
                                this.page_range = data['data']['page_range'];
                            },
                            function (error) {
                                console.log(error)
                            }
                        )
                    },
                    get_keywords_data:function () {
                        var keywords = $('#keywords').val();
                        var url = '/Shop/Goods/?keywords='+keywords;
                        this.$http.get(url).then(
                            function (data) {
                                this.goods_list = data['data']['data'];
                                this.page_range = data['data']['page_range'];
                                this.referer = data['data']['referer'];
                            },
                            function (error) {
                                console.log(error)
                            }
                        )
                    }
                }
            }
        )
    </script>
{% endblock %}